<template>
  <div id="ht-hourpicker">
    <div v-popover:hourPop_ref class="ht-timepicker-hour picker-box">
      <span>{{ selectedHour }}</span>
    </div>
    <span style="margin-left: 5px">时</span>
    <vue-popper
      ref="hourPop_ref"
      v-model="visible"
      placement="bottom"
      trigger="click"
      :visible-arrow="false"
    >
      <div class="hour-picker-box">
        <HourTable
          :selected-hour="selectedHour"
          :hour-interval="hourInterval"
          :custom-hours="customHours"
          @onSelectHour="handleSelectHour"
        />
      </div>
    </vue-popper>
  </div>
</template>

<script>
import HourTable from './HourTable';

export default {
  name: 'HourPicker',
  props: {
    // 选中的小时
    selectedHour: {
      type: String,
      required: true,
    },
    // 小时间隔
    hourInterval: {
      type: Number,
    },
    // 自定义时间显示内容
    customHours: {
      type: Array,
    },
    // 是否选中关闭弹框
    autoClose: {
      type: Boolean,
    },
  },
  components: { HourTable },
  data() {
    return {
      visible: false,
      calendarDate: '', // 显示的日期时间
    };
  },
  computed: {
    year() {
      return new Date(this.calendarDate).getFullYear();
    },
    month() {
      return new Date(this.calendarDate).getMonth();
    },
    showMonth() {
      const mm = this.month + 1;
      return mm > 9 ? mm.toString() : '0' + mm;
    },
  },
  created() {},
  mounted() {
    // this.calendarDate = this.selectedDate
  },
  methods: {
    handleCheck(type, dateType) {
      let year, month;
      if (dateType === 'year') {
        year = type === 'before' ? this.year - 1 : this.year + 1;
        this.calendarDate = this.calendarDate.replace(
          this.calendarDate.substr(0, 4),
          year
        );
      } else {
        if (this.month === 0 && type === 'before') {
          month = '12';
          year = this.year - 1;
        } else if (this.month === 11 && type === 'after') {
          month = '01';
          year = this.year + 1;
        } else {
          const mm = type === 'before' ? this.month : this.month + 2;
          month = mm > 9 ? mm : '0' + mm;
          year = this.year;
        }
        this.calendarDate = this.calendarDate.replace(
          this.calendarDate.substr(0, 7),
          year + '-' + month
        );
      }
    },
    handleSelectHour(val) {
      if (val !== this.selectedHour) {
        this.$emit('onSelectHour', val);
      }
      if (this.autoClose) {
        this.visible = false; // 关闭弹框
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#ht-hourpicker {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  .ht-timepicker-hour {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 50px;
    text-align: center;
  }
  .picker-box {
    background-color: rgba(9, 78, 182, 0.7);
    border-left: 1px solid #255895;
    border-bottom: 1px solid #255895;
    cursor: pointer;
    user-select: none;
  }
}
</style>
<style lang="scss"></style>
